<template>
  <div class="store-container c21">
    <h4 class="df jcsb aic">
      店铺管理<el-button :disabled="dis" type="primary" @click="sava"
        >保存</el-button
      >
    </h4>
    <div class="p30 body">
      <div class="df aic">
        <span>店铺名称</span>
        <el-input v-model="storedata.name" placeholder="请输入内容"></el-input>
      </div>
      <div>
        <span>店铺公告</span>
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="storedata.bulletin"
          style="width: 400px"
          class="ml15"
          rows="6"
        >
        </el-input>
      </div>
      <div>
        <span>店铺头像</span>
        <el-upload
          action="http://127.0.0.1:5000/shop/upload"
          :on-success="handleAvatarSuccess"
          style="margin-left: 15px"
          :show-file-list="false"
        >
          <img :src="storedata.avatar" />
        </el-upload>
      </div>
      <div>
        <span>店铺图片</span>
        <el-upload
          action="http://127.0.0.1:5000/shop/upload"
          :on-remove="handleRemove"
          :on-success="picsSuccess"
          :file-list="fileList"
          list-type="picture-card"
          style="margin-left: 15px"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="df aic">
        <span>配送费</span>
        <el-input
          v-model="storedata.deliveryPrice"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="df aic">
        <span>配送时间</span>
        <el-input
          v-model="storedata.deliveryTime"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="df aic">
        <span>配送描述</span>
        <el-input
          v-model="storedata.description"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="df aic">
        <span>店铺评分</span>
        <el-input
          v-model="storedata.score"
          placeholder="请输入内容"
          disabled
        ></el-input>
      </div>
      <div class="df aic">
        <span>销量</span>
        <el-input
          v-model="storedata.sellCount"
          placeholder="请输入内容"
          disabled
        ></el-input>
      </div>
      <div class="df aic">
        <span>参加活动</span>
        <el-input v-model="activity" placeholder="请输入内容"></el-input>
        <el-button
          style="margin-left: 10px"
          type="primary"
          @click="storedata.supports.push(activity)"
          >参加活动</el-button
        >
      </div>
      <div>
        <span>活动</span>
        <el-checkbox-group
          v-model="checkList"
          class="ml15 df"
          style="margin-bottom: 0"
        >
          <el-checkbox
            v-for="item in storedata.supports"
            :key="item"
            :label="item"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="df aic">
        <span>营业时间</span>
        <el-time-picker
          is-range
          v-model="storedata.date"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          class="ml15"
          style="margin-bottom: 0"
        >
        </el-time-picker>
      </div>
    </div>
  </div>
</template>

<script>
import { store, edit } from "@/apis/store";
export default {
  data() {
    return {
      activity: "",
      storedata: {},
      checkList: [], //选中的活动
      fileList: [],
      datalist: [], //获取的数组
      imgname: [], //图片名数组
      dis: false,
    };
  },
  methods: {
    //获取店铺详情
    getinfo() {
      store().then((res) => {
        this.storedata = res.data.data;
        let obj = res.data.data;
        this.newimg = obj.avatar.substring(obj.avatar.lastIndexOf("/") + 1);
        this.fileList = obj.pics.map((getname) => {
          let name = getname.substring(getname.lastIndexOf("/") + 1);
          this.imgname.push(name);
          return {
            url: getname,
            name,
          };
        });
      });
    },

    //用户头像上传
    handleAvatarSuccess(res, file) {
      this.newimg = res.imgUrl;
      this.storedata.avatar = URL.createObjectURL(file.raw);
    },

    //商品图片上传
    picsSuccess(res) {
      this.imgname.push(res.imgUrl);
    },

    //删除照片墙图片
    handleRemove(file) {
      let name = file.response ? file.response.imgUrl : file.name;
      for (let i = 0; i < this.imgname.length; i++) {
        if (this.imgname[i] == name) {
          this.imgname.splice(i, 1);
          break;
        }
      }
      console.log(this.imgname);
    },

    //保存并发送请求
    sava() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 1000);
      let params = {
        id: this.storedata.id,
        name: this.storedata.name,
        bulletin: this.storedata.bulletin,
        deliveryPrice: this.storedata.deliveryPrice,
        deliveryTime: this.storedata.deliveryTime,
        description: this.storedata.description,
        score: this.storedata.score,
        sellCount: this.storedata.sellCount,
        supports: JSON.stringify(this.checkList),
        date: JSON.stringify(this.storedata.date),
        pics: JSON.stringify(this.imgname),
        avatar: this.newimg,
      };
      console.log(params);
      edit(params).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "店铺信息修改成功!",
          });
          this.getinfo();
        }
      });
    },
  },

  created() {
    this.getinfo();
  },
};
</script>

<style lang="less" scoped>
.store-container {
  box-shadow: 0 0 15px 1px #ccc;
  padding-bottom: 40px;
  background-color: #fff;
  border-radius: 5px;
  h4 {
    line-height: 75px;
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    .el-button {
      height: 36px;
    }
  }
  .body {
    div {
      display: flex;
      margin-bottom: 20px;
      span {
        width: 8%;
        text-align: right;
      }
      .el-checkbox-group {
        width: 400px;
        display: flex;
        flex-wrap: wrap;
        .el-checkbox {
          margin-bottom: 15px;
        }
      }
      .el-input {
        width: 400px;
        margin-left: 15px;
        margin-bottom: 0;
      }
    }
  }
}
</style>